import React from "react";
import {useNavigate} from "react-router-dom";
import {Button, Layout, Space, Typography} from "antd";
import {AppHeader} from "@/components/common/AppHeader.jsx";
import "./Common.css"

const {Header, Content} = Layout;

export default function HomePage() {
  const navigate = useNavigate();

  return (
    <Layout className="layoutRoot">
      <AppHeader/>
      <Content style={{width: '100%'}}>
        <Space direction="vertical" size={56} style={{width: "100%"}} align="center">
          {/* 增加 header 与标题的间距 */}
          <div style={{marginTop: 48, marginBottom: 40, textAlign: "center"}}>
            <Typography.Title level={1} style={{margin: 0, fontSize: 48, fontWeight: 700}}>
              欢迎使用语跃语伴
            </Typography.Title>
            <Typography.Text type="secondary" style={{fontSize: 22}}>
              让我们开始一次轻松的对话吧！
            </Typography.Text>
          </div>
          <Button
            type="primary"
            size="large"
            style={{
              marginBottom: 20,
              width: 240,
              fontSize: 22,
              height: 56,
              borderRadius: 8,
            }}
            onClick={() =>
              navigate("/chat", {
                state: {
                  userId: "c05d3d7f-28f8-4277-88cd-bea5ace34c7f",
                  chatInfo: {mode: 1, situation: "自由对话"},
                },
              })
            }
          >
            自由对话
          </Button>
          <Button
            type="primary"
            size="large"
            style={{
              marginBottom: 20,
              width: 240,
              fontSize: 22,
              height: 56,
              borderRadius: 8,
            }}
            onClick={() => navigate("/scenario")}
          >
            情景对话
          </Button>
        </Space>
      </Content>
    </Layout>
  );
}